<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<div class="box-item">
			</div>
			<div class="items"></div>
		</div>
	</body>
	<style>
		.box,.box-item,.items{
			display: inline-block;
			border-radius: 50%;
			width: 100px;
			height: 100px;
		}
		.box{
			margin: 20px;
			position: relative;
			border: 1px solid red;
		}
		.box-item{
			position: absolute;
			width: 0;
			height: 0;
			border:50px solid #000000;
			border-color: red red transparent transparent;
			background-color: red;
			z-index: 0;
		}
		.items{
			width: 0;
			height: 0;
			position: absolute;
			border:50px solid #000000;
			z-index: 1;
			animation-fill-mode: forwards;
			/* animation: go 20s linear; */
			transform: rotate(0deg);
			border-color: green green green transparent;
		}
		@keyframes go{
			from{
				transform: rotate(0deg);
				border-color: green green green transparent;
			}
			24.9%{
				transform: rotate(90deg);
				border-color: green green green transparent;
			}
			25%{
				transform: rotate(0deg);
				border-color:  green green transparent transparent;
			}
			49.9%{
				transform: rotate(90deg);
				border-color:  green green transparent transparent;
			}
			50%{
				transform: rotate(0deg);
				border-color:  green transparent transparent transparent;
			}
			74.9%{
				transform: rotate(90deg);
				border-color:  green transparent transparent transparent;
			}
			75%{
				transform: rotate(0deg);
				border-color:  green transparent transparent transparent;
			}
			
			/* to{
				transform: rotate(90deg);
				border-color:  green green transparent green;
			} */
		}
	</style>
</html>
